<template>
  <div class="dashboard-container">
    <div class="container0">
      <figure-cards :list="list1" dir="horizontal" round="true"></figure-cards>
    </div>
    <div class="container1">
      <figure-cards :list="list1" dir="horizontal"></figure-cards>
    </div>
    <div class="container2">
      <figure-cards :list="list1" dir="vertical"></figure-cards>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import FigureCards from '../components/figure/FigureCards.vue'
import { Figure } from '@/api-scp/types'
import { getOverviewFigures1 } from '@/api-scp/dashboard'

@Component({
  name: 'OverviewFigures',
  components: {
    FigureCards
  }
})
export default class extends Vue {
  private list1: Figure[] = []
  private listLoading = true

  created() {
    this.getList()
  }

  private async getList() {
    this.listLoading = true
    this.list1 = await getOverviewFigures1()
    this.listLoading = false
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  //background-color: rgb(240, 242, 245);
  position: relative;

  div {
    margin-top: 1em;
  }

  .container0 {
    width: 600px;
  }

  .container1 {
    width: 400px;
  }

  .container2 {
    width: 140px;
  }
}

</style>
